// Normal colors
$textColor: #2d2d2d;
$buttonTextColor: #ffffff;
$buttonBackgroundColor: #9c9c9c;
$linkColor: #328CAA;
$linkColor-isHover: #105A73;
$inputTextColor: $textColor;
$inputBackgroundColor: #ffffff;
$inputBorderColor: $inputBackgroundColor;

// Dark theme colors
$textColor--darkTheme: #cecece;
$buttonTextColor--darkTheme: #ffffff;
$buttonBackgroundColor--darkTheme: #777777;
$linkColor--darkTheme: #b7e2ea;
$linkColor-isHover--darkTheme: #def2f6;
$inputTextColor--darkTheme: $textColor--darkTheme;
$inputBackgroundColor--darkTheme: #444444;
$inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme;

// Font
$font: "Open Sans", Helvetica, Arial, sans-serif;
$fontSize: 14px;
$lineHeight: 1.5;

// Button
$buttonBorderRadius: 4px;

// Colors
$successColor: #417505;
$warningColor: #ffac15;
$errorColor: #D86051;
$fontColor: #191E23;
$subduedFontColor: #9fa3a7;
$linkColor: #3CAED2;
$linkHoverColor: #006E8A;
$panelColor: #E4E4E4;
$selectedBorderColor: #6EADC1;
$errorBorderColor: $errorColor;

// Borders
$tableBorder: 2px solid $panelColor;

// Timing
$formTransitionTiming: 0.1s linear;

@mixin darkTheme() {
  .theme-dark & {
    @content;
  }
}

/**
 * 1. Make sure outline doesn't get hidden beneath adjacent elements.
 * 2. Override inherited styles (possibly from Bootstrap).
 */
@mixin focus($color: #6EADC1) {
  z-index: 1; /* 1 */
  outline: 1px solid $color !important; /* 2 */
  outline-offset: 2px !important; /* 2 */
}

@mixin formControl {
  appearance: none;
  padding: 3px 12px 4px;
  font-size: $fontSize;
  font-weight: 400;
  line-height: $lineHeight;
  background-color: #ffffff;
  border: 1px solid #DEDEDE;
  color: $fontColor;
  border-radius: $buttonBorderRadius;
  transition: border-color $formTransitionTiming;

  /**
   * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
   *    We only want invalid inputs to appear invalid after the user has had a chance to interact
   *    with it.
   */
  &:invalid {
    &:not(.ng-untouched) { /* 1 */
      border-color: $errorBorderColor;
    }
  }

  &:focus {
    outline: none;
    border-color: $selectedBorderColor;
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: $font;
}

@import "button/index";
@import "form/index";
@import "icon/index";
@import "info_panel/index";
@import "link/index";
@import "loading_items/index";
@import "local_nav/index";
@import "micro_button/index";
@import "no_items/index";
@import "panel/index";
@import "table/index";
@import "tabs/index";
@import "tool_bar/index";
